<template>
  <!-- 急涨急跌 -->
  <div class="wrapper">
    <div class="warning mb30" v-if="dataList && observerList">
      <LImage :src="Config.img('ic_ai_warning.png')" alt="" class="warning-img mr15" />
      <text class="font24 warning-text all">{{T('当您关注的币种对应时间内波动超过阈值，系统会给您发送提醒')}}</text>
    </div>
    <div class="row jbetween acenter mb12 padding">
      <div class="column">
        <text class="font32 text2 mb20">{{T('监控标的')}}</text>
        <view class="line main1"></view>
      </div>
      <text class="font28 text2 height40" @click="addAi">{{T('添加预警')}}</text>
    </div>
    <scroller class="scroller" v-if="dataList" ref="scroller" resize="none" @rightBtn="rightBtn">
      <div class="content">
        <!-- 监控的指标 -->
        <div class="top-list">
          <div class="top-item" v-for="(item, index) in observerList" :key="index">
            <div class="row mb15">
              <text class="text1 font32 ml20">{{ item.extTitle }}</text>
              <text class="warning-text font32">{{ item.extThreshold }}</text>
            </div>
            <text class="font24 text3 ml20">{{ item.cTime }}</text>
            <div class="but-close" @click="funcClick(item,index)">
              <LImage class="img-genduo" :src="Config.img('ic_ai_close.png')" />
            </div>
          </div>
        </div>
        <text class="font24 tip padding">{{T('各币种指标具有一定趋同性,建议添加币种不超过6个,避免打扰')}}</text>
        <div class="line1 height1 mt30 mb40"></div>

        <VTitle class="title ml30" type="line-hong" :arrow="false" :title="T('异动播报')"></VTitle>
        <div class="mb20"></div>
        <!-- 历史预警 -->
        <VTipTrendRecordCell class="ml10 mr10" v-for="(item, index) in dataList" :key="index" :item="item" />
        <div class="height40"></div>
      </div>

    </scroller>

  </div>

</template>

<style src="@/_css/style.css"></style>
<style scoped>
  .scroller {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .wrapper {
    flex: 1;
    width: 750px;
    display: flex;
  }
  .warning {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgba(240, 56, 105, 0.1);
    padding: 20px 40px;
  }
  .warning-img {
    width: 28px;
    height: 28px;
  }
  .warning-text {
    color: #db4564;
  }
  .content {
    width: 750px;
    display: flex;
  }
  .padding {
    padding: 0 30px;
  }
  .line {
    height: 4px;
    border-radius: 3px;
  }
  .tip {
    color: #468aff;
  }
  .top-list {
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 0 17px;
  }
  .img-genduo {
    width: 32px;
    height: 32px;
  }
  .top-item {
    justify-content: center;
    width: 332px;
    padding-top: 30px;
    padding-bottom: 20px;
    margin: 0 13px;
    margin-bottom: 24px;
    background-image: linear-gradient(to bottom, #0b1026, #121d39);
    border-radius: 16px;
  }
  .but-close {
    z-index: 9;
    position: absolute;
    align-items: center;
    justify-content: center;
    bottom: 12px;
    right: 0px;
    width: 52px;
    height: 52px;
  }
</style>

<script>
  import VTitle from "@/home/view/VTitle.vue";
  import VTipTrendRecordCell from "@/aide/view/VTipTrendRecordCell.vue";
  import ACFunc from "@/_public/ACFunc";
  import jconfig from "@/_js/config";
  import jmodal from "@/_js/modal";
  import jtime from "@/_js/time";
  import jdebug from "@/_js/debug";
  import jhttps from "@/_js/https";
  import jnavigator from "@/_js/navigator";
  const clipboard = weex.requireModule("clipboard");
  import jbroadcast from "@/_js/broadcast";
  const animation = weex.requireModule("animation"); //动画
  const domModule = weex.requireModule("dom");
  const stream = weex.requireModule("stream"); //网络请求
  const weexFunction = weex.requireModule("WeexFunction");
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;
  weexFunction.setTitle(T("急涨急跌"));
  export default {
    components: {
      VTitle,
      VTipTrendRecordCell,
      ACFunc,
    },

    data() {
      return {
        Config: jconfig,
        T: T,
        observerList: null,
        dataList: null,
      };
    },

    created() {},

    mounted() {
      this.refresh();
    },

    methods: {
      /********************************** HTTPS*/
      //https AI首页
      refresh() {
        var param = {
          pageNo: 1,
          pageSize: 100,
          indicatorType: "fluctuation",
        };
        let url = "indicator/getUserIndicatorList";
        jmodal.showLoad();
        jhttps.post(url, param, true, (data) => {
          if (data.status == 200) {
            let keys = [];
            let observerList = [];
            let list = data.data;
            if (list.length > 0) {
              for (let i = 0; i < list.length; i++) {
                let item = list[i];

                let triggerCondition = item.triggerCondition;
                item.extTitle =
                  item.counterCoin +
                  "-" +
                  this.conditionTransform(
                    "timeInterval",
                    triggerCondition.timeInterval
                  );
                item.extThreshold =
                  "±" +
                  this.conditionTransform(
                    "threshold",
                    triggerCondition.threshold
                  );

                // let key =
                //   item.counterCoin +
                //   triggerCondition.timeInterval +
                //   triggerCondition.threshold;
                // if (keys.includes(key)) {
                //   continue;
                // } else {
                // keys.push(key);
                item.cTime = jtime.getTime(item.updateTime, "y-M-d H:m:s");
                observerList.push(item);
                // }
              }
            }
            this.observerList = observerList;
            this.history();
          } else {
            jmodal.toast(data.msg);
          }
        });
      },
      history() {
        var param = {
          pageNo: 1,
          pageSize: 3,
          indicatorType: "fluctuation",
          recordType: "fluctuation",
        };
        jhttps.post("indicator/getIndicatorRecordList", param, true, (data) => {
          this.isRefresh = false;
          jmodal.hideLoad();
          if (data.status == 200) {
            let list = data.data;
            let tList = [];
            for (let i = 0; i < list.length; i++) {
              let item = list[i];
              if (i < 3) {
                tList.push(item);
              }
            }
            this.dataList = tList;
          } else {
            jmodal.toast(data.msg);
          }
        });
      },

      /********************************** 点击*/
      //添加预警
      addAi() {
        jnavigator.open("", "aide/riseFallSet", {
          pageRef: "create",
        });
        jbroadcast.subscribeOnce("riseRefresh", () => {
          this.refresh();
        });
      },

      //功能显示
      funcClick(item, index) {
        var parm = {
          title: T("提示"),
          message: T("确认删除预警") + " ？",
          okBtn: T("确认"),
          cancelBtn: T("取消"),
        };
        jmodal.confirm(parm, (bool) => {
          if (bool == "true") {
            this.httpsdDeleteById(item, index);
          }
        });
      },
      //https 删除信号
      httpsdDeleteById(item, index) {
        jmodal.showLoad();
        var param = { id: parseInt(item.id) };
        jhttps.postX("indicator/deleteUserIndicator", param, true, (data) => {
          jmodal.hideLoad();
          if (data.status == 200) {
            this.observerList.splice(index, 1);
            this.observerList =
              this.observerList.length == 0 ? [] : this.observerList;
            jmodal.toast(T("删除成功"));
          } else {
            jmodal.toast(data.msg);
          }
        });
      },

      conditionTransform(type, value) {
        if (type == "timeInterval") {
          let minutes = Number(value);
          if (minutes < 60) {
            return `${minutes}${T("分钟")}`;
          } else {
            const hours = Math.floor(minutes / 60); // 计算小时
            const remainingMinutes = minutes % 60; // 计算剩余分钟
            if (remainingMinutes === 0) {
              return `${hours}${T("小时")}`; // 如果没有剩余分钟，只显示小时
            } else {
              return `${hours}${T("小时")}${remainingMinutes}${T("分钟")}`; // 显示小时和分钟
            }
          }
        } else {
          return (Number(value) * 100).toFixed(0) + "%";
        }
      },
    },
  };
</script>